import {animate, keyframes, state, style, transition, trigger} from "@angular/animations";

export const animates = [
  trigger("wraper-fade", [
    state('false', style({transform: 'translate3d(0px,0,0)'})),
    state('true', style({transform: 'translate3d(-320px,0,0)'})),
    transition("false <=> true", animate(200))
  ]),
  trigger("mask-fade", [
    state("false", style({display: "none", opacity: 0})),
    state("true", style({display: "block", opacity: .7})),
    transition("false => true", animate(200, keyframes([
      style({display: "block", opacity: 0, offset: 0}),
      style({opacity: .3, offset: .5}),
      style({opacity: .7, offset: 1})
    ]))),
    transition("true => false", animate(200, keyframes([
      style({opacity: 0.7, offset: 0.0}),
      style({opacity: 0.3, offset: 0.5}),
      style({display: "none", opacity: 0, offset: 1})
    ])))
  ]),
  trigger("sidebar-fade", [
    state('void', style({transform: 'translate3d(0px,0,0)'})),
    state('*', style({transform: 'translate3d(-320px,0,0)'})),
    transition("void <=> *", animate(200))
  ])
]


